import React, { memo, useEffect } from 'react';
import KeepAliveHoc from '@/components/KeepAliveHoc';
import styles from './index.less';
import { Button, Modal, Row, Col } from 'antd';
import IconFont from '@/components/IconFont';
import useHoxModel from './useHoxModel';
import { PlanListReturnType } from './API';
import { useModel } from 'umi';
import ModalComponent from './components/Modal';
import ConfirmProps from '@/components/CommonModal/Confirm';
export const modelName = 'planTemplate';
const { confirm } = Modal;

const PlanTemplate = () => {
  const {
    getPlanModeList,
    getPlanModeInfo,
    deletePlanMode,
    planModelList,
  } = useHoxModel((model) => [model.planModelList]);
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  useEffect(() => {
    getPlanModeList();
  }, []);
  const itemType = (item: PlanListReturnType) => {
    const selDayInfo = item.selDayInfo || '';
    const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    const rest = weeks.filter((app: string, index: number) => {
      return Number(selDayInfo[index]) === 1;
    });
    return [
      {
        title: '计划时间段',
        value: `${item.startTime} - ${item.endTime}`,
      },
      {
        title: '计划周期',
        value: rest.join(', '),
      },
      {
        title: '模板备注',
        value: item.rec,
      },
    ];
  };

  return (
    <div className={styles['plan-container']}>
      <div className={styles['toolbal-wrap']}>
        <Button
          onClick={() => {
            showModal(modelName + 'add');
          }}
        >
          <IconFont type={'iconxinzeng1'} />
          <span> 新增</span>
        </Button>
      </div>
      <Row gutter={[16, 16]} className={styles['plan-template-wrap']}>
        {(planModelList?.list || []).map((item: PlanListReturnType, index: number) => {
          return (
            <Col span={8} key={index.toString(36) + index}>
              <div className={styles['plan-template-item']}>
                <div className={styles['plan-template-item-operation']}>
                  <span
                    className={styles['edit']}
                    onClick={() => {
                      getPlanModeInfo({ id: item.id as number });
                      showModal(modelName + 'edit');
                    }}
                  >
                    <IconFont type={'iconbianji1'} />
                  </span>
                  <span
                    className={styles['delete']}
                    onClick={() => {
                      confirm({
                        ...new ConfirmProps(),
                        async onOk() {
                          const res = await deletePlanMode({ id: item.id as number });
                          if (res?.result === 0) {
                            getPlanModeList();
                          }
                        },
                      });
                    }}
                  >
                    <IconFont type={'iconshanchu1'} />
                  </span>
                </div>
                <div className={styles['plan-template-item-title']}>{item.name || ''}</div>
                {itemType(item).map((app, i: number) => {
                  return (
                    <div
                      key={i.toString(36) + i}
                      className={styles['plan-template-item-content-row']}
                    >
                      <span className={styles['plan-template-item-content-row-title']}>
                        {app.title + ':'}
                      </span>
                      <span className={styles['plan-template-item-content-row-value']}>
                        {app.value}
                      </span>
                    </div>
                  );
                })}
              </div>
            </Col>
          );
        })}
      </Row>
      <ModalComponent />
    </div>
  );
};

export default KeepAliveHoc(memo(PlanTemplate));
